<template>
  <c-loading :loading="loading">
    <view class="container with">
      <view class="with-box">
        <view class="t">提现金额</view>
        <view class="numberbox" @tap="state.focus = true">
          <input :focus="state.focus" @blur="state.focus = false" type="number" v-model="state.amount" />
        </view>
        <view class="tips" @tap="setAll">
          可提现金额￥{{ state.available }}，
          <text class="color-primary">全部提现</text>
        </view>
      </view>
      <view class="fixed-footer pad">
        <c-button type="primary" @tap="onSubmit" :disabled="!state.amount || state.amount <= 0">提现</c-button>
      </view>
    </view>
    <template #popup>
      <c-popup v-model="showRealAuth">
        <view class="popup-textarea-wrap">
          <view class="popup-textarea-title">账户安全验证</view>
          <view class="input">
            <input v-model="state.realName" placeholder="请输入您的真实姓名" />
          </view>
          <view>
            <c-button type="primary" :disabled="!state.realName" @tap="onSubmit">确认</c-button>
          </view>
        </view>
      </c-popup>
    </template>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CPopup } from '@/components';
import { useLoading, useRouter } from '@/hooks';
import { View, Input } from '@tarojs/components';
import { getAccountInfoSync } from '@tarojs/taro';
import api from '@/api';
import { reactive, ref } from 'vue';
const showRealAuth = ref(false);

const router = useRouter();
const state = reactive({
  focus: false,
  balance: 0,
  available: 0,
  realName: '',
  amount: ''
});
const { loading } = useLoading(async options => {
  const data = await api.account.getBalance();
  state.balance = data.balance;
  state.available = data.available;
});

const setAll = () => {
  state.amount = state.available + '';
};

const onSubmit = async () => {
  const appId = getAccountInfoSync().miniProgram.appId;
  await api.account
    .accountWithdrawalApply({
      appId,
      realName: state.realName,
      withdrawalAmount: state.amount,
      withdrawalChannel: 0
    })
    .catch(e => {
      if (e.code == 3006) {
        e.isShow = true;
        showRealAuth.value = true;
        return Promise.reject(e);
      }
      return Promise.reject(e);
    })
    .toast('提交成功，请等待系统审核');
  router.back({});
};
</script>
<style lang="scss">
.with.container {
  padding: 20px 30px 0;
  .with-box {
    margin: 0px 0 60rpx;
    background: var(--color-caption);
    border-radius: 10rpx;
    padding: 0 30rpx;
  }

  .with-box .t {
    font-weight: bold;
    font-size: 26rpx;
    padding: 35rpx 0;
  }

  .tips {
    line-height: 105rpx;
    font-size: 26rpx;
    color: var(--color-info);
  }

  .ks {
    padding: 30rpx 0 0rpx;
    font-size: 22rpx;
    color: var(--color-info);
  }

  .numberbox {
    padding: 20rpx 0 45rpx 58rpx;
    position: relative;
    border-bottom: 1px solid var(--color-line);
  }

  .numberbox::before {
    position: absolute;
    content: '￥';
    left: 10rpx;
    bottom: 45rpx;
    display: block;
  }

  .numberbox input {
    height: 80rpx;
    font-size: 80rpx;
  }

  .tit {
    padding-bottom: 15rpx;
  }
}
</style>
